<template>
  <div>
    <div class="view-login view-regist">
      <div class="login-content">
        <div class="left">
          <img src="../../../static/register/bg.png" alt="背景图">
        </div>
        <div class="right">
          <div class="right-content">
            <div class="title">
              <span>注册账号</span>
            </div>
            <el-form ref="registerForm" :model="registerForm" :rules="rules" label-width="0"
                     style="background-color: #fff">
              <el-form-item prop="username">
                <el-input v-model="registerForm.username" placeholder="请输入姓名" clearable></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="registerForm.password" autocomplete="off"
                          placeholder="请输入密码" show-password></el-input>
              </el-form-item>
              <el-form-item prop="checkPass">
                <el-input type="password" v-model="registerForm.checkPass" autocomplete="off"
                          placeholder="请再次输入密码确认" show-password></el-input>
              </el-form-item>
              <el-form-item required>
                <el-col :span="11">
                  <el-form-item prop="educationBgm">
                    <el-select v-model="registerForm.educationBgm" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2">&nbsp;</el-col>
                <el-col :span="11">
                  <el-form-item prop="gender">
                    <el-radio v-model="registerForm.gender" :label="1">男</el-radio>
                    <el-radio v-model="registerForm.gender" :label="0">女</el-radio>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item prop="age">
                <el-input v-model.number="registerForm.age" placeholder="请输入你的年龄"></el-input>
              </el-form-item>
            </el-form>
            <div class="bottom-box">
              <div style="margin-top: 12px">
                <el-button type="primary" style="width: 100%" @click="submitRegister('registerForm')">注册</el-button>
              </div>
              <div style="margin-top: 12px; text-align: right;font-size: 14px">
                已有账号？
                <span style="cursor:pointer;color: #4285f4;" @click="goLogin('registerForm')">去登录</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {postRequest} from '../../tools/api'
import {mymessage} from '../../tools/mymessage'

export default {
  name: 'Register',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.checkPass !== '') {
          this.$refs.registerForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      options: [{
        value: '0',
        label: '小学'
      }, {
        value: '1',
        label: '中学'
      }, {
        value: '2',
        label: '本科'
      }, {
        value: '3',
        label: '研究生'
      }, {
        value: '4',
        label: '博士'
      }],
      registerForm: {
        username: '',
        password: '',
        checkPass: '',
        educationBgm: '',
        clazz: '',
        usertype: 0,
        age: ''
      },
      rules: {
        // mobile: [
        //   {required: true, message: '请输入邮箱/手机号/账号', trigger: 'blur'}
        // ],
        password: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        username: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        gender: [
          {required: true, message: '请选择性别', trigger: 'blur'}
        ],
        educationBgm: [
          {required: true, message: '请选择学历', trigger: 'blur'}
        ],
        value: [
          {required: true, message: '请选择', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '请输入你的年龄', trigger: 'blur'}
        ]
        // jobNumber: [
        //   {required: true, message: '请输入学号', trigger: 'blur'}
        // ]
      }
      // options: [],
      // value: [],
      // list: [],
      // loading: false,
      // states: ["Alabama", "Alaska", "Arizona",
      //   "Arkansas", "California", "Colorado",
      //   "Connecticut", "Delaware", "Florida",
      //   "Georgia", "Hawaii", "Idaho", "Illinois",
      //   "Indiana", "Iowa", "Kansas", "Kentucky",
      //   "Louisiana", "Maine", "Maryland",
      //   "Massachusetts", "Michigan", "Minnesota",
      //   "Mississippi", "Missouri", "Montana",
      //   "Nebraska", "Nevada", "New Hampshire",
      //   "New Jersey", "New Mexico", "New York",
      //   "North Carolina", "North Dakota", "Ohio",
      //   "Oklahoma", "Oregon", "Pennsylvania",
      //   "Rhode Island", "South Carolina",
      //   "South Dakota", "Tennessee", "Texas",
      //   "Utah", "Vermont", "Virginia",
      //   "Washington", "West Virginia", "Wisconsin",
      //   "Wyoming"]
    }
  },
  mounted () {
    // this.list = this.states.map(item => {
    //   return { value: `value:${item}`, label: `label:${item}` };
    // });
  },
  methods: {
    // remoteMethod(query) {
    //   if (query !== '') {
    //     this.loading = true;
    //     setTimeout(() => {
    //       this.loading = false;
    //       this.options = this.list.filter(item => {
    //         return item.label.toLowerCase()
    //           .indexOf(query.toLowerCase()) > -1;
    //       });
    //     }, 200);
    //   } else {
    //     this.options = [];
    //   }
    // }

    submitRegister (form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          postRequest('/user/register', this.registerForm).then(resp => {
            if (resp && resp.code === 200) {
              mymessage.success('注册成功')
              this.resetForm(form)
              this.$router.push('/')
            }
          })
        } else {
          return false
        }
      })
    },
    goLogin (form) {
      this.$router.push('/')
      this.resetForm(form)
    },
    resetForm (form) {
      this.$refs[form].resetFields()
    }
  }
}
</script>

<style scoped>
.view-login {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.view-login .el-button, .view-login .el-input__inner {
  height: 48px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.view-regist {
  display: flex;
  flex-direction: column;
  background-size: 100%;
  background-repeat: no-repeat;
  /*padding-top: 20px;*/
}

.view-login .logo-box {
  position: absolute;
  top: 48px;
  left: 62px;
  cursor: pointer;
}

.view-regist .login-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-login .login-content {
  display: flex;
  justify-content: space-between;
}

.view-login .login-content .left {
  margin-right: -100px;
}

.view-login .login-content .left img {
  display: block;
  height: 538px;
}

.view-regist .login-content .right {
  margin: 12px 0;
}

.view-regist .login-content .right .right-content {
  width: 431px;
  padding: 0 35px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 0 61px 0 rgb(85 108 144 / 7%);
}

.view-regist .login-content .right .title {
  position: relative;
  padding: 18px 0;
  text-align: center;
}

.view-regist .login-content .right .title span {
  font-size: 22px;
  font-weight: 700;
}

.view-regist .login-content .right .bottom-box {
  padding-bottom: 12px;
  margin-top: 35px;
}

.view-login .role-box {
  display: flex;
  justify-content: space-between;
}

.view-login .role-box .item {
  width: 172px;
  padding: 8px 16px;
  border: 1px solid #fff;
}

.flex-align {
  display: flex;
  align-items: center;
}

.view-login .role-box .item .icon {
  margin-right: 9px;
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.view-login .role-box .item .name {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  text-align: center;
  color: #3c4043;
  line-height: 24px;
  letter-spacing: 1px;
}

.view-login .role-box .active {
  border: 1px solid #4285f4;
}
</style>
